<template>
    <!-- transition="slide-y-reverse-transition" -->
    <v-menu class="header y-select" transition="slide-y-reverse-transition">
        <template v-slot:activator="{ props }">
            <div class="j-search " v-bind="props">
                <span class="j-ctx c-title-5" v-if="curRange == searchRanges[0]">
                    {{ $t("message.filterList.a") }}
                </span>
                <span class="j-ctx c-title-5" v-else>
                    {{ formatBigNumber(curRange.from, 0) }}
                </span>
                <div class="ss-btn">
                    <span class="iconfont icon-sanjiaoxing sea-btn"></span>
                </div>
            </div>
        </template>
        <v-list>
            <v-list-item v-for="(item, i) in searchRanges" @click="onRange(item, i)">
                <v-list-item-title class="d-flex align-center fline">
                    <div class="i-txt c-title-5">
                        <!-- <template v-if="i == 0">全部</template> -->
                        <template v-if="i == 0">{{ $t("message.filterList.b") }}</template>
                        <template v-else> > {{ formatBigNumber(item.from, 0) }} </template>
                    </div>
                    <div v-if="item == curRange" class="cir"></div>
                </v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</template>

<script lang="ts" setup>
import { formatBigNumber } from "@/comm/format";
import { ref } from "vue";

const emit = defineEmits(["change"]);

const searchRanges = ref([createRange(null as any, true), createRange([10, 1000]), createRange([1000, 100000]), createRange([100000, 100000000]),createRange([1000000, 1000000]), createRange([100000000, 1000000000000])]);

const curRange = ref(searchRanges.value[0]);

function createRange(ary: any[], choose = false) {
    if (!ary) {
        return { choose };
    }
    return {
        from: ary[0],
        to: ary[1],
        choose
    };
}

const onRange = (item: any, i: number) => {
    curRange.value = item;
    console.log(item, i);
    if (i == 0) {
        emit("change", 0);
    } else {
        emit("change", item.from);
    }
    // updateRange();
    // resetTable();
};
</script>

<style lang="less" scoped>
.cir {
    width: 16px;
    height: 16px;
    background: var(--main) url("@/assets/dui.png") no-repeat center;
    background-size: contain;
    border-radius: 50%;
}

.j-search {
    display: flex;
    width: 60%;
}

.sea-btn {
    font-size: 12px;
    // margin-left: 10px;
    transform: scale(0.72);
    display: inline-block;
}

.fline {
    justify-content: space-between;
}
</style>
